<template>
    <div class="buttons row">

        <!-- Left Block -->
        <div class="col-md-6">

            <div class="card">
                <div class="card-header">
                    <strong>Badges </strong>
                    <small>Use this class
                        <code>&lt;a&gt;</code>, <code>&lt;button&gt;</code> or <code>&lt;input&gt;</code>
                    </small>
                </div>
                <div class="card-body">
                    <button type="button" class="btn btn-primary">Primary</button>
                    <button type="button" class="btn btn-secondary">Secondary</button>
                    <button type="button" class="btn btn-success">Success</button>
                    <button type="button" class="btn btn-danger">Danger</button>
                    <button type="button" class="btn btn-warning">Warning</button>
                    <button type="button" class="btn btn-info">Info</button>
                    <button type="button" class="btn btn-link">Link</button>
                </div>
            </div><!-- /# card -->


            <div class="card">
                <div class="card-header">
                    <strong>Button tags </strong>
                    <small>Use this class
                        <code>.btn</code> or <code>&lt;button&gt;</code>
                    </small>
                </div>
                <div class="card-body">
                    <a class="btn btn-primary" href="#" role="button">Link</a>
                    <button class="btn btn-danger" type="submit">Button</button>
                    <input class="btn btn-info" type="button" value="Input">
                    <input class="btn btn-success" type="submit" value="Submit">
                    <input class="btn btn-warning" type="reset" value="Reset">
                </div>
            </div><!-- /# card -->

            <div class="card">
                <div class="card-header">
                    <strong>Disabled state </strong>
                    <small>Use this class
                        <code>disabled="disabled"</code>
                    </small>
                </div>
                <div class="card-body">
                    <button type="button" class="btn btn-primary" disabled>Primary</button>
                    <button type="button" class="btn btn-secondary" disabled>Secondary</button>
                    <button type="button" class="btn btn-success" disabled>Success</button>
                    <button type="button" class="btn btn-danger" disabled>Danger</button>
                    <button type="button" class="btn btn-warning" disabled>Warning</button>
                    <button type="button" class="btn btn-info" disabled>Info</button>
                    <button type="button" class="btn btn-link" disabled>Link</button>
                </div>
            </div><!-- /# card -->


            <div class="card">
                <div class="card-header">
                    <strong>Button with Icons </strong>
                    <small>Use <code>&lt;i&gt;</code></small>
                </div>
                <div class="card-body">
                    <button type="button" class="btn btn-primary"><i class="fa fa-star"></i>&nbsp; Primary</button>
                    <button type="button" class="btn btn-secondary"><i class="fa fa-lightbulb-o"></i>&nbsp; Secondary</button>
                    <button type="button" class="btn btn-success"><i class="fa fa-magic"></i>&nbsp; Success</button>
                    <button type="button" class="btn btn-warning"><i class="fa fa-map-marker"></i>&nbsp; Warning</button>
                    <button type="button" class="btn btn-danger"><i class="fa fa-rss"></i>&nbsp; Danger</button>
                    <button type="button" class="btn btn-link"><i class="fa fa-link"></i>&nbsp; Link</button>
                </div>
            </div><!-- /# card -->



        </div>



        <!-- Right Block -->
        <div class="col-md-6">

            <div class="card">
                <div class="card-header">
                    <strong>Outline Buttons </strong>
                    <small>Use this class
                        <code>&lt;a&gt;</code>, <code>&lt;button&gt;</code> or <code>&lt;input&gt;</code>
                    </small>
                </div>
                <div class="card-body">
                    <button type="button" class="btn btn-outline-primary">Primary</button>
                    <button type="button" class="btn btn-outline-secondary">Secondary</button>
                    <button type="button" class="btn btn-outline-success">Success</button>
                    <button type="button" class="btn btn-outline-danger">Danger</button>
                    <button type="button" class="btn btn-outline-warning">Warning</button>
                    <button type="button" class="btn btn-outline-info">Info</button>
                    <button type="button" class="btn btn-outline-link">Link</button>
                </div>
            </div><!-- /# card -->


            <div class="card">
                <div class="card-header">
                    <strong>Button tags </strong>
                    <small>Use this class
                        <code>.btn</code> or <code>&lt;button&gt;</code>
                    </small>
                </div>
                <div class="card-body">
                    <a class="btn btn-outline-primary" href="#" role="button">Link</a>
                    <button class="btn btn-outline-danger" type="submit">Button</button>
                    <input class="btn btn-outline-info" type="button" value="Input">
                    <input class="btn btn-outline-success" type="submit" value="Submit">
                    <input class="btn btn-outline-warning" type="reset" value="Reset">
                </div>
            </div><!-- /# card -->

            <div class="card">
                <div class="card-header">
                    <strong>Disabled state </strong>
                    <small>Use this class
                        <code>disabled="disabled"</code>
                    </small>
                </div>
                <div class="card-body">
                    <button type="button" class="btn btn-outline-primary" disabled>Primary</button>
                    <button type="button" class="btn btn-outline-secondary" disabled>Secondary</button>
                    <button type="button" class="btn btn-outline-success" disabled>Success</button>
                    <button type="button" class="btn btn-outline-danger" disabled>Danger</button>
                    <button type="button" class="btn btn-outline-warning" disabled>Warning</button>
                    <button type="button" class="btn btn-outline-info" disabled>Info</button>
                    <button type="button" class="btn btn-outline-link" disabled>Link</button>
                </div>
            </div><!-- /# card -->


            <div class="card">
                <div class="card-header">
                    <strong>Button with Icons </strong>
                    <small>Use <code>&lt;i&gt;</code></small>
                </div>
                <div class="card-body">
                    <button type="button" class="btn btn-outline-primary"><i class="fa fa-star"></i>&nbsp; Primary</button>
                    <button type="button" class="btn btn-outline-secondary"><i class="fa fa-lightbulb-o"></i>&nbsp; Secondary</button>
                    <button type="button" class="btn btn-outline-success"><i class="fa fa-magic"></i>&nbsp; Success</button>
                    <button type="button" class="btn btn-outline-warning"><i class="fa fa-map-marker"></i>&nbsp; Warning</button>
                    <button type="button" class="btn btn-outline-danger"><i class="fa fa-rss"></i>&nbsp; Danger</button>
                    <button type="button" class="btn btn-outline-link"><i class="fa fa-link"></i>&nbsp; Link</button>
                </div>
            </div><!-- /# card -->


        </div>


    </div>
</template>